<template>
  <div style="margin-top: 10px">
    <el-tag
      class="org-item"
      :type="org.type === 'dept' ? '' : 'info'"
      v-for="(org, index) in _value"
      :key="index + '_org'"
      closable
      size="small"
      @close="removeOrgItem(index)"
    >
      {{ org.name }}
    </el-tag>
  </div>
</template>

<script>
import { computed, toRefs } from 'vue'

export default {
    name: 'OrgItems',
    props: {
        modelValue: {
            type: Array,
            default: () => {
                return []
            },
        },
    },
    emits: ['update:modelValue'],
    setup(props, context) {
        const { modelValue } = toRefs(props)
        const _value = computed({
            get: () => {
                return modelValue.value
            },
            set: val => {
                context.emit('update:modelValue', val)
            }
        })
        const removeOrgItem = (index) => {
            _value.value.splice(index, 1)
        }
        return {
            _value,
            removeOrgItem
        }
    }
}
</script>

<style>

</style>